@charset "utf-8";
/* CSS Document */
body{
	background:#e9e4ce;
	margin:0;
	padding:0;
	border:0;
	list-style:none;
	text-decoration:none;
}
a { text-decoration:none;}
.content{
	width:1280px;
	height:800px;
	background:url(../images/background.jpg);
	margin:0 auto;
	margin-top:-45px;
}
/********代码移植****************from:index.html*****************************************************/
.nav { 
	width:610px;
	background:url(../images/button_base.png) no-repeat bottom;
	margin-top:130px;
	margin-left:50px;
	float:left;
}
/*下面我用到的是float：right而不是left，为的是更好的控制li的排列*/
.nav a,.nav_name li {
	margin-right:15px;
	float:right;
	width:86px;
	height:86px;
	margin-bottom:15px;
}
/*a:hover是伪类，当鼠标停留或者经过nav的时候，图片移到有色图案。因为鼠标经过能够点亮的那几张图片，我用的是两张一样的图片合成的
86*86的图片我合成为172*86的左亮右黑白的图片，把这个图片作为背景放置在86*86的容器内，鼠标没有经过时显示的是黑白的，当鼠标经过的时候，
利用background—position这个属性使背景向左平移86px，从而达到目的*/
.nav a:hover,.nav a:active { background-position:0 0;}
.img_id_1 { background:url(../images/link_2p.png) -86px 0;}
.img_id_2 { background:url(../images/album_2p.png) }
.img_id_3 { background:url(../images/bulletin_2p.png) -86px 0; }
.img_id_4 { background:url(../images/chat_2p.png) -86px 0; }
.img_id_5 { background:url(../images/contact_2p.png) -86px 0; }
.img_home { background:url(../images/home_2p.png) -86px 0; }
/*没有把nav和nav_name合并到一起的原因是，我们想当鼠标经过图片时，他们所对应的名字将会同时出现，这就要求把而这分开放置。
z-index的作用是防止map这个图层覆盖nav及nav-name的内容*/
.nav_name {
	height:37px;
	width:660px;
	float:left;
}
/*保证nav-name li中的文字居中*/
.nav_name li {
	list-style:none;
	text-align:center;
}
.nav_name img {display:none;}
/********代码移植****************from:index.html*****************************************************/
.display{
	margin:auto auto;
	top:120px;
	width:929px;
	height:435px;
	position:relative;
}

.more{
	top:146px;
	left:393px;
	background:url(../images/photo.png);
	text-align:center;
	font-size:36px;
	color:#F90;
	line-height:140px;
}
/*均是以content为父元素，进行相对定位和绝对定位*/
label { font-size:28px;}
.img_1,.img_2,.img_3,.img_4,.more {
	width:143px;
	height:143px;
	position:absolute;
}
.img_1{
	top:0px;
	left:393px;
	display:block;
}
.img_2{
	top:146px;
	left:247px;
	display:block;
	background:url(../images/photo_2.gif);
}
.img_3{
	top:146px;
	left:539px;
	display:block;
	background:url(../images/photo_3.gif);
}
.img_4{
	top:292px;
	left:393px;
	display:block;
	background:url(../images/photo_4.gif);
}
.explain_1,.explain_2,.explain_3,.explain_4 {
	width:244px;
	height:143px;
	position:absolute;
	background:url(../images/explain_background.png);
}
/*该部分主要是运用相对定位*/
h2{ text-align:center;}
p {text-indent:2em; line-height:16px}
.explain_1{
	top:0px;
	left:146px;
}
.explain_2{
	top:146px;
	left:0px;
}
.explain_3{
	top:146px;
	left:685px;
}
.explain_4{
	top:292px;
	left:539px;
}

/******************************************实现右上方的两个小标签***********************************/
#our_label{
	width:232px;
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	right:100px;
	list-style: none;
    z-index:999999;
}
/*其属性设置为fixe，他将会跟着滚动条一起运动*/
#our_label li {
    width: 108px;
    display:inline;
    float:left;    
}
#our_label a {
	width:116px;
	height:120px;
	display: block;
    float:none;
	text-decoration:none;
	text-align:center;
}
/*display设置为block可以使鼠标经过那一块的时候，都会有链接*/
.about_us a{background:url(../images/about_us.png) no-repeat;}
.contact_us a{background:url(../images/contact_us.png) no-repeat;}
/******************************************实现右上方的两个小标签***********************************/
